<template>
  <template v-for="field in fields" :key="field.name">
    <tr class="api-table-row">
      <td :class="['nested-param', `level-${level}`]">
        {{ field.name||'-' }}
        <IconAdd v-if="field.type === 'object' || field.type === 'array'" class="expand-icon" @click="toggleExpansion(getFieldKey(field))"
          :class="{ 'expanded': expandedItems[getFieldKey(field)] }" />
      </td>
      <td>{{ field.type }}</td>
      <td v-if="showRequired">{{ field.required ? '是' : '否' }}</td>
      <td>{{ field.description }}</td>
    </tr>
    <!-- 递归渲染子属性 -->
    <template v-if="(field.type === 'object' || field.type === 'array') && expandedItems[getFieldKey(field)]">
      <RecursiveParamRow :fields="field.fields || []" :level="level + 1" :show-required="showRequired"
        :expanded-items="expandedItems" :parent-key="getFieldKey(field)" @toggle-expansion="toggleExpansion" />
    </template>
  </template>
</template>

<script setup lang="ts">
interface Field {
  name: string;
  type: string;
  required?: boolean;
  description: string;
  fields?: Field[];
}

interface Props {
  fields: Field[];
  level?: number;
  showRequired?: boolean;
  expandedItems: Record<string, boolean>;
  parentKey?: string;
}

const props = withDefaults(defineProps<Props>(), {
  level: 0,
  showRequired: false,
  parentKey: ''
});

const emit = defineEmits<{
  toggleExpansion: [key: string];
}>();

const getFieldKey = (field: Field) => {
  return props.parentKey ? `${props.parentKey}.${field.name}` : field.name;
};

const toggleExpansion = (key: string) => {
  emit('toggleExpansion', key);
};
</script>

<style scoped lang="less">
// 确保子层级继承父层级的表格样式
.api-table-row {

  // 继承父层级的行样式
  td {
    padding: 10px 12px;
    text-align: left;
    border: 1px solid var(--border-light);
    word-wrap: break-word;
    overflow-wrap: break-word;
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 500;
  }

  // 继承父层级的悬浮效果
  &:hover {
    background: rgba(107, 114, 128, 0.1) !important;
    transition: background-color 0.2s ease;
  }
}

.nested-param {
  display: flex;
  align-items: center;

  &.level-1 {
    padding-left: 28px !important;
  }

  &.level-2 {
    padding-left: 50px !important;
  }

  &.level-3 {
    padding-left: 72px !important;
  }

  &.level-4 {
    padding-left: 94px !important;
  }

  &.level-5 {
    padding-left: 116px !important;
  }

  &.level-6 {
    padding-left: 138px !important;
  }

  &.level-7 {
    padding-left: 160px !important;
  }

  &.level-8 {
    padding-left: 182px !important;
  }

  &.level-9 {
    padding-left: 204px !important;
  }

  &.level-10 {
    padding-left: 226px !important;
  }

  // 支持更多层级
  &.level-11 {
    padding-left: 248px !important;
  }

  &.level-12 {
    padding-left: 270px !important;
  }

  &.level-13 {
    padding-left: 292px !important;
  }

  &.level-14 {
    padding-left: 314px !important;
  }

  &.level-15 {
    padding-left: 336px !important;
  }
}



.expand-icon {
  cursor: pointer;
  transition: all 0.3s ease;
  margin-left: 8px;
  font-size: 13px;
  fill: var(--text-secondary);

  &:hover {
    fill: var(--primary-color);
    transform: scale(1.1);
  }

  &.expanded {
    transform: rotate(45deg);
    fill: var(--primary-color);
  }
}
</style>
